<script setup lang="ts">
import { router } from '@/router';

const toSearch = () => {
    try {
        router.push("/message/search");
    } catch (e) {
        console.error('导航错误:', e);
    }
}
</script>

<template>
    <div class="message-header">
        <div class="header-title">
            <h1>我的消息</h1>
        </div>
        
        <div class="header-actions">
            <button class="action-btn search-btn" @click="toSearch" title="搜索联系人">
                <van-icon name="search" />
            </button>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.message-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    
    .header-title {
        h1 {
            font-size: 20px;
            font-weight: 600;
            margin: 0;
        }
    }
    
    .header-actions {
        display: flex;
        gap: 12px;
        
        .action-btn {
            position: relative;
            
            .search-btn {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 40px;
                height: 40px;
                border-radius: 50%;
                background-color: #f2f3f5;
                color: #323233;
                border: none;
                cursor: pointer;
                transition: all 0.2s;
                
                &:hover {
                    background-color: #e8e9eb;
                }
                
                .van-icon {
                    font-size: 20px;
                }
            }
        }
    }
}
</style>